* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-size: 5vw;
  /* font-family: myLisu; */
  /* overflow: hidden; */
}

/* @font-face {
  font-family: myLisu;
  src: url(./myLisu.ttf)
} */

/* body, html {
  width: 100%;
} */

html {
  overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
  width: 100vw;
  overflow: hidden;
  /* background-color: aquamarine; */
}

li {
  list-style: none;
}

.massage-wraper {
  width: 98vw;
  /* height: 100%; */
  margin: 0 auto;

}

.massage-wraper section {
  margin: 0 auto;
  margin-top: 50vw;
  padding: 2vw 0;
  width: 80%;
  min-height: 60vh;
  background-color: rgba(227, 227, 227, 0.7);
  border-radius: 1vw;
  /* box-shadow: 0px 0px 4vw 0.5vw rgb(255, 255, 255) */
}

.msg-float {
  /* width: 100vw; */
  margin: 2vw 0;
  height: fit-content;
  background: url(../../../public/msg-float.gif) no-repeat;
  padding-top: 5vw;
  background-size: 100% 100%;
  overflow: hidden;
  border-radius: 2%;
}

.msg-float .p-wraper {
  margin: 0 0.1vw;
  overflow: hidden;
}

.msg-float p {
  /* min-width: fit-content; */
  width: min-content;
  max-width: 100%;
  color: rgb(230, 229, 221);
  /* font-family: Lisu; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3vw;
  /* background-color: rgb(30, 1, 35); */
  border-radius: 3%;

}

.text-float {
  transform: translateX(100vw);
  animation: ps 15s linear infinite;
}

.float-delay-1 {
  animation-delay: 3s;
  -webkit-animation-delay: 3s;
}

.float-delay-2 {
  animation-delay: 6s;
  -webkit-animation-delay: 6s;
}

.float-delay-3 {
  animation-delay: 9s;
  -webkit-animation-delay: 9s;
}

.float-delay-4 {
  animation-delay: 12s;
  -webkit-animation-delay: 12s;
}


@keyframes ps {
  0% {
    transform: translateX(100vw);
  }

  100% {
    transform: translateX(-100vw);
  }
}

.msg-input {
  /* height: 25vw; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;

}

.msg-input::after {
  clear: both;
}

/* .msg-input input:hover {
  border: none;
} */

.msg-input input {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  margin: 2vw;
  font-size: 4.5vw;
  display: block;
  width: 60%;
}

.msg-input textarea {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  font-size: 4.5vw;
  margin: 2vw;
  height: 40vw;
}

.msg-input button {
  background-color: rgba(205, 205, 205,0);
  border: 1vw rgb(205, 205, 205) solid;
  border-radius: 2vw;
  box-shadow: 0px 0px 2vw 1vw rgba(94, 90, 90, 0.8)
}

.msg-show {
  /* background-color: rgb(245, 245, 245); */
  padding: 1.5vw 1vw;
}

.msg-show ul li {
  display: flex;
  align-items: center;
  border: 0.2vw rgb(148, 148, 148) solid;
  border-radius: 1vw;
  width: 100%;
  margin: 3vw 0;
}

.msg-show ul li::after {
  clear: both;
}

.msg-show ul li i {
  background: url(../../../public/head.png) no-repeat;
  background-size: 100% 100%;
  width: 7vw;
  height: 7vw;
  display: inline-block;
  vertical-align: center;
  margin: 0 2vw;
}

.msg-show ul li .msg-time {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 1vw 2vw 1vw 0;
  /* border: 1vw gray solid; */
}

.msg-show ul li .msg-time .msg {
  font-size: 4.5vw;

}

.msg-show ul li .msg-time .time {
  font-size: 3.5vw;
  display: block;
}